<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../css/non-responsive.css" rel="stylesheet">
<link href="../../css/font-awesome.min.css" rel="stylesheet">
<link href="../../css/sco.message.css" rel="stylesheet">
<link href="../../css/scojs.css" rel="stylesheet">  
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<link href="../../css/manageGroup.css" rel="stylesheet">    
<script src="../../js/jquery.min.js"></script>
<script src="../../js/sco.message.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../js/bootstrap.js"></script>
<script src="../../js/logout.js"></script>
</head>
<body>
	{% include 'public/common/header.html' %}
	{% if groups %}
<div class="container" style="margin-top:45px">
		<div class="row">
			<div class="col-xs-12">
				<div>
					<div class="tab_left pull-left">
						<ul class="nav nav-tabs">
						  <li class="active" id="join_li"><a href="#join" data-toggle="tab">我加入的</a></li>
						  <li id="mine_li"><a href="#mine" data-toggle="tab">我的小组</a></li>
						</ul>
					</div>
					
					<div class="clearfix"></div>
				</div>
<!-- Tab panes -->
				<div class="tab-content">
<!-- 我加入的  标签第一签 -->
					<div class="tab-pane active" id="join">
						<table class="table table-hover">
							<thead>
								<tr>
									<th class="th1">小组</th>
									<th class="th2">小组成员</th>
									<th class="th3">创建者</th>
									<th class="th4">操作</th>
								</tr>
							</thead>
							<tbody>
<!-- 我加入的 一条小组循环开始处 -->
							{% for i in groups %}
								<tr id="groups{{i.0}}">
									<td class="td1">
										<div class="pull-left"><img src="{{i.6}}/{{i.5}}" width="50px" text-align="absmiddle"/></div>
										<div class="td_12 pull-left"><a href="{% url 'groups:thegroup' i.0 %}" title="hahaha">{{i.1}}</a></div>
										<div class="clearfix"></div>
									</td>
									<td><div class="td_text">{{i.2}}</div></td>
									<td><div class="td_text">{{i.3}}</div></td>
									<td>
										<div class="td_text">
											<span class="td_a"><a href="javascript:void(0)" onclick="join({{i.0}})">退出小组</a></span>
											<span class="td_a"><a href="{% url 'groups:thegroup' i.0 %}">进入小组</a></span>
										</div>
									</td>
								</tr>
							{% endfor %}
<!-- 我加入的 一条小组循环结束处 -->
							</tbody>
						</table>
						<ul class="pager">
						{% if follow.has_previous %}
						  <li><a href="?page={{ follow.previous_page_number }}">&larr;上一页</a></li>
						{% endif %}
						共 {{ follow.number }} 页  第 {{ follow.paginator.num_pages }} 页.
						{% if follow.has_next %}
						  <li><a href="?page={{ follow.next_page_number }}">下一页&rarr;</a></li>
						{% endif %}
						</ul>
					</div>
<!-- 我创建的  标签第二签 -->
					<div class="tab-pane" id="mine">
						<table class="table table-hover">
							<thead>
								<tr>
									<th class="tth1">小组</th>
									<th class="tth2">小组成员</th>
									<th class="tth3">创建时间</th>
									<th class="tth4">操作</th>
								</tr>
							</thead>
							<tbody>
<!-- 我创建的 一条小组循环开始处 -->
							{% for j in my %}
								<tr>
									<td class="td1">
										<div class="pull-left"><img src="{{j.domain}}/{{j.img}}" width="50px" text-align="absmiddle"/></div>
										<div class="td_12 pull-left"><a href="{% url 'groups:thegroup' j.id %}" title="hahaha">{{j.name}}</a></div>
										<div class="clearfix"></div>
									</td>
									<td><div class="td_text">{{j.crew_con}}</div></td>
									<td><div class="td_text">{{j.time|date:"Y-m-d H:i"}}</div></td>
									<td>
										<div class="td_text">
											<span class="td_a"><a href="{% url 'groups:thegroup' j.id %}">管理小组</a></span>
											<span class="td_a"><a href="{% url 'groups:thegroup' j.id %}">进入小组</a></span>
										</div>
									</td>
								</tr>
							{% endfor %}
<!-- 我创建的 一条小组循环结束处 -->
							</tbody>
						</table>
					</div>
				</div>
				
			</div>
		</div>
</div>
	
	{% endif %}
	
	
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

	<script type="text/javascript">
		$('#introduce').popover({html:true});
		$('#score').popover({html:true});
		$('#edit').popover({html:true});
		
		function star(integ)
		{
			alert(integ);
		}

		var xmlHttp; 

		function createXMLRequest(){
			if(window.ActiveXObject){
				xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
			} else if(window.XMLHttpRequest){
				xmlHttp=new XMLHttpRequest();
			}
		}
//加入小组
		function join(id){   
			createXMLRequest();                       
			var url="/groups/join/?id="+id;
			xmlHttp.open("GET",url);
			xmlHttp.onreadystatechange=function(e){
				if(xmlHttp.readyState==4 && xmlHttp.status==200){
					e.preventDefault();
					$.scojs_message('您的操作成功！', $.scojs_message.TYPE_OK);
					document.getElementById("groups"+id).style.display="None";
				}
			};
			xmlHttp.send(); 
		}
	</script>
	<!--<script type="text/javascript">
		$(function(){
			$("#join").attr("class","tab-pane");
			$("#mine").attr("class","tab-pane active");
			$("#join_li").removeAttr("class");
			$("#mine_li").attr("class","active");
		})
	</script>-->
</body>
</html>